<template>
<div class="wrap">
<xcl-header :show="loading.show" :page-title="pageTitle" :call-back="callBack" :header-right="headerRight"></xcl-header>
<div class="content">
	<div class="list-block">
	    <ul>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:25%">手机号</div>
	            <div class="item-input">
	              <input type="text" maxlength="11" v-model="user.userName" placeholder="">
	            </div>
	          </div>
	        </div>
	      </li>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:25%">密&nbsp;&nbsp;&nbsp;码</div>
	            <div class="item-input">
	              <input type="password" v-model="user.passWord" placeholder="">
	            </div>
	          </div>
	        </div>
	      </li>
	      <li>
	        <div class="item-content">
	          <div class="item-inner">
	            <div class="item-title label" style="width:25%">验证码</div>
	            <div class="item-input">
	              <input type="text" maxlength="4" v-model="user.softCodeInput"  placeholder="">	              
	            </div>
	            <div class="item-input"><img  :src="softCode" @click="refreshCode" /></div>
	          </div>
	        </div>
	      </li>
		</ul>
	</div>
	<div class="content-block">
		<button :class="['button','button-fill','btn-style',forbidenLogin ? 'disabled':'']"  @click="login">{{pageTitle}}</button>
	</div>
	<div class="content-block text-right">
		<a v-link="{path:'/ResetPassword'}">忘记密码？</a>
	</div>	
</div>
<xcl-toast :show="toast.show" :show-content="toast.content"></xcl-toast>
  </div>
</template>
<script>
	import {getCheck,ERROR_DEFINE}  from '../libs/utils'
	import xclHeader from '../components/header.vue'
	import xclToast from '../components/xclToast.vue'
	let UserProxy =  require("../proxy/user_proxy");
	let User = new UserProxy();
	export default {
		data(){
			return{
				scroll:true,
                pageTitle:'登录',
                headerRight:'注册',
                softCode:SoftCodeUrl+'?img='+Math.floor(Math.random() * (10000 + 1)),
                forbidenLogin:true,
                callBack:()=>{this.$router.go('/SignUp');},
                user:{
                	userName:localStorage.phoneNumber || '',
                	passWord:'',
                	softCodeInput:''
                },                
                loading:{
                    show:true,
                    showTxt:'数据加载中...'
                },
                toast:{
                	show:false,
                	content:''
                }
			}
		},
		watch:{
			'user':{
				handler:function (val,oldVal) {
					if(!getCheck.checkPhone(val.userName) || !val.passWord || !val.softCodeInput){
						this.forbidenLogin = true;
					}else{
						this.forbidenLogin = false;
					}
				},
				deep:true
			}
		},
		methods:{
			login(){
				let _this=this;
				if(_this.forbidenLogin)return;
				_this.pageTitle = '登录中';
				if(!getCheck.checkPhone(_this.user.userName)){
					_this.showToast('请输入有效的手机号！');
					return false;
				}
				if(!_this.user.passWord){
					_this.showToast('请输入有效的密码！');
					return false;
				}
				if(!_this.user.softCodeInput){
					_this.showToast('请输入有效的验证码！');
					return false;
				}
				User.login(this.user.userName+"|"+this.user.softCodeInput,this.user.passWord,function(d){
					if(d.code === 200 && d.results && d.results.length){
						_this.forbidenLogin = true;
						localStorage.token         = d.results[0].t;
						localStorage.nickName      = d.results[0].nn;
						localStorage.phoneNumber   = d.results[0].pn;
						localStorage.lastLoginTime = d.results[0].llt;
						localStorage.ia 		   = d.results[0].ia;
						localStorage.email 		   = d.results[0].e;
						let redirect = decodeURIComponent(_this.$route.query.redirect || '/User');
						_this.toast = {show:true,content:'登录成功，跳转中...'};
                        setTimeout(()=>{
                        	_this.toast.show = false;
                        	_this.$route.router.go(redirect);
                        },2800);
					}else if(d.code == 404){
						_this.showToast(ERROR_DEFINE[d.code]);
						_this.refreshCode();
						_this.pageTitle = '登录';
					}else{
						_this.showToast(ERROR_DEFINE[d.code]);
						_this.pageTitle = '登录';
					}
				})
			},
			refreshCode(){
				this.softCode=SoftCodeUrl+'?img='+Math.floor(Math.random() * (10000 + 1));
			},
			showToast(text){
				this.toast={show:true,content:text};
				setTimeout(()=>{this.toast.show =  false},2800);
			}
		},
		components:{
           "xclHeader":xclHeader,    
           'xclToast':xclToast      
        }
	}
</script>
<style lang="stylus">
.text-right
	text-align right	
</style>